<template>
  <div class="antiknock-page">
    <ScaleScreen
      :width="1920"
      :height="1080"
      class="scale-wrap"
      :selfAdaption="isScale"
    >
      <div class="bg">
        <dv-loading v-if="loading">Loading...</dv-loading>
        <div v-else class="host-body">
          <!-- 头部 -->
          <antiknockHeader></antiknockHeader>
          <div class="contents">
            <div class="contetn_left">
              <div class="contetn_left-top">
                <title-decoration-3 title="温度统计">
                  <leftTop></leftTop>
                </title-decoration-3>
              </div>
              <div class="contetn_left-bottom mt-20">
                <title-decoration-3 title="可燃气体监测统计">
                  <leftBottom></leftBottom>
                </title-decoration-3>
              </div>
            </div>
            <div class="contetn_center">
              <div class="contetn_center-top">
                <centerTop
                  title="太仓市凯德防腐科技有限公司—抗爆柜监控"
                ></centerTop>
              </div>
              <div class="contetn_center-bottom mt-30">
                <title-decoration-3
                  title="温度/可燃气体报警记录"
                  :centerStyle="{ height: '310px' }"
                >
                  <centerBottom></centerBottom>
                </title-decoration-3>
              </div>
            </div>
            <div class="contetn_right">
              <div class="contetn_right-top">
                <title-decoration-3 title="危化品储存统计">
                  <rightTop></rightTop>
                </title-decoration-3>
              </div>
              <div class="contetn_right-bottom mt-20">
                <title-decoration-3 title="风机统计">
                  <rightBottom></rightBottom>
                </title-decoration-3>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ScaleScreen>
  </div>
</template>
<script>
import antiknockHeader from "./antiknock-header.vue";
import leftTop from "./left-top.vue";
import leftBottom from "./left-bottom.vue";
import centerTop from "./center-top.vue";
import centerBottom from "./center-bottom.vue";
import rightTop from "./right-top.vue";
import rightBottom from "./right-bottom.vue";

export default {
  name: "antiknock-page",
  components: {
    antiknockHeader,
    leftTop,
    leftBottom,
    centerTop,
    centerBottom,
    rightTop,
    rightBottom,
  },
  data() {
    return {
      isScale: true, // 是否进行全局适配
      loading: true,
    };
  },
  filters: {},
  computed: {},
  watch: {},
  beforeCreate() {},
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      setTimeout(() => {
        this.loading = false;
      }, 1000);
    },
  },
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
};
</script>
<style lang="scss" scoped>
.antiknock-page {
  width: 100%;
  height: 100%;
  background: #00002a;
  .scale-wrap {
    color: #d3d6dd;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    background: url("~@/assets/images/antiknock-bg.png");
    background-position: left top, right bottom, left top;
    background-repeat: no-repeat, no-repeat, repeat-x;
    background-size: cover;
    // border: 1px solid red;
    .bg {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      .host-body {
        .contents {
          width: 100%;
          display: flex;
          padding: 10px 0px;
          justify-content: space-evenly;
          .contetn_left,
          .contetn_right {
            width: 490px;
            height: 950px;
            padding: 0px 20px;
            box-sizing: border-box;
            .contetn_left-top {
              height: 450px;
            }
            .contetn_left-bottom {
              height: 475px;
              // border: 1px solid red;
            }
            .contetn_right-top {
              height: 520px;
            }
            .contetn_right-bottom {
              height: 405px;
            }
          }
          .contetn_center {
            width: 810px;
            .contetn_center-top {
              height: 555px;
            }
            .contetn_center-bottom {
              height: 360px;
            }
          }
        }
      }
    }
  }
}
</style>
